<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>
    <div id="box">
      <div class="qrBackground" :style="{height: scrollerHeight,width:scrollerWidth}">
        <img id="scream"  :src="imgbg" :style="{height: scrollerHeight,width:scrollerWidth}" crossOrigin="Anonymous">
      </div>
      <div id="qrcode" ref="qrcode"></div>
    </div>
    <div class="mask" v-if="mask" @click="closeMask()">
      <img :src="posterImg" alt="">
      <span>长按保存海报</span>
    </div>
    <canvas id="canvas" hidden></canvas>
    <el-button type="text" @click="dialog = true"><img src="../../assets/icon/upbtn.png" alt=""></el-button>
    <div class="btn-box">
      <mt-button class='btn2' size='normal' type="primary" @click='createPoster()'>生成海报</mt-button>
      <mt-button class='btn1' size='normal' @click='toQrTemplate()' type="primary">更多模板</mt-button>
    </div>



    <el-drawer title="分组" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <div class="group-item" v-for="(item,index) in qrCodeInfo" @click="changeCodeUrl(index)">{{item.gid_name}}</div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import QRCode from 'qrcodejs2' // 引入qrcode
  import {
    get_qrcode,
    get_qrcode_img
  } from '@/api/';
  export default {
    components: {
      html2canvas
    },
    data() {
      return {
        mask:false,
        tel: '',
        qrCodeInfo: '', //分组信息
        dialog: false,
        imgbg: '', //二维码背景
        qrcodeUrl: '', //二维码地址
        imgtest: '../../assets/icon/qrbg.jpg', //测试图片地址
        host: '', //域名地址
        posterImg: '', // 最终生成的海报图片
      }
    },
    methods: {
      getQRcode() {
        this.host = window.location.protocol + "//" + window.location.host; //   返回https://mp.csdn.net
        this.tel = JSON.parse(localStorage.getItem('tel'));
        get_qrcode({
          tel: this.tel
        }).then(res => { //分组qrCodeInfo
          this.qrCodeInfo = res.data;
          this.qrcodeUrl = this.host + '/#/reg' + this.qrCodeInfo[0].url;
          // console.log(this.qrcodeUrl)
          let qrcode = new QRCode('qrcode', {
            width: 120,
            height: 120,
            text: this.qrcodeUrl, // 二维码地址
            colorDark: "#000",
            colorLight: "#fff",
            correctLevel: QRCode.CorrectLevel.H
          })
          // qrcode.makeCode();
        }).then(res => {
          get_qrcode_img({
            tel: this.tel
          }).then(res => { //获取背景图片
            this.imgbg = res.data; //this.getURLBase64(res.data) getBase64Image
          })
        })





      },

      changeCodeUrl(index) { //修改二维码地址
        let host = window.location.protocol + "//" + window.location.host; //   返回https://mp.csdn.net
        let qrimg = document.querySelector("#qrcode img"); //获取二维码
        this.$refs.qrcode.innerHTML = ''; //清除上一个二维码
        this.qrcodeUrl = this.host + '/#/reg' + this.qrCodeInfo[index].url;
        let qrcode = new QRCode('qrcode', {
          width: 110,
          height: 110,
          text: this.qrcodeUrl, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff",
        })
        // qrcode.makeCode();
        this.dialog = false;
      },
      toQrTemplate() { //跳转更多模板
        this.$router.push('/qrTemplate')
      },
      canvasImg() { //初始化画布
        let canvas = document.getElementById("canvas"); //获取画布
        let ctx = canvas.getContext('2d'); //设置画布为2d
        let winW = window.innerWidth //获取屏幕宽度
        let winH = window.innerHeight - 30 //获取屏幕高度
        canvas.width = winW //设置画布宽度
        canvas.height = winH //设置画布高度
        let imgbg = document.getElementById("scream"); //获取背景图片
        let qrimg = document.querySelector("#qrcode img"); //获取二维码
        imgbg.onload = function() {
          ctx.drawImage(imgbg, 0, 0, winW, winH);
          ctx.drawImage(qrimg, winW / 2 - 50, winH / 2, 110, 110);
        }
      },
      createPoster() {
        // 生成海报
        const vm = this
        const domObj = document.getElementById('box')
        html2canvas(domObj,{useCORS: true,logging: false,}).then(function(canvas) {
          // 在微信里,可长按保存或转发
          vm.posterImg = canvas.toDataURL('image/png')
          vm.mask = true;
        })
      },
      closeMask(){
        this.mask = false;
      }


    },
    mounted() {


      window.onresize = () => { // 当调整窗口大小时重绘canvas
        this.initCanvas()
      }
    },
    created() {
      this.getQRcode();
    },
    computed: {
      scrollerHeight: function() {
        return (window.innerHeight - 40) + 'px';
      },
      scrollerWidth: function() {
        return (window.innerWidth) + 'px';
      }
    }
  }
</script>

<style scoped>
  #box {
    position: relative;
  }
  .mask{position: fixed;background-color: #000;opacity: .9;top: 0;left: 0;display: flex;justify-content: center;right: 0;bottom: 0;align-items: center;z-index: 999;}
  .mask img{width: 90%;height: 90%;}
  .mask span{position: absolute;bottom: 2em;color: #0000FF;}
  /* #canvas{display: none;} */
  #qrcode {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    top: 50%;

  }

  .qrBackground {
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat:no-repeat;
  }

  .qrcode-box {
    height: 72vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  /* .qeBackground{position: absolute;} */
  /* .qrBackground > img{width: 100%;position: absolute;top: 0;left: 0;z-index: 0;bottom: 0;height: 72vh;} */
  .qrimg {
    position: absolute;
    right: 0;
    bottom: 1em;
  }

  .item-list {
    margin: 1em;
  }

  .item {
    width: 47%;
    border: 1px solid #ccc;
    border-radius: 6px;
    height: 100px;
    margin-bottom: 1em
  }

  .item:nth-of-type(even) {
    float: right;
  }

  .item:nth-of-type(odd) {
    float: left;
  }

  .btn-box {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 1em;
    width: 100%;
  }

  .btn1,
  .btn2 {
    background-color: rgba(47, 57, 83, .9);
    border-radius: 20px;
    width: 100px;
    font-size: 14px;
  }

  /deep/ .el-drawer__close-btn {
    display: none;
  }

  .group-item {
    border-bottom: 1px solid #ccc;
    margin-left: 1em;
    margin-bottom: 1em;
    text-align: center;
  }

  .el-button {
    position: absolute;
    top: 0em;
    right: 1em;
    z-index: 10000;
  }

  .el-button img {
    width: 30px;
  }
</style>
